<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线考试</title>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <base target="_blank">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header class="title">
            <div class="c900 flex">
                <el-link :underline="false" href="index.html">
                    <h1>在线考试</h1>
                </el-link>
                <time>时间: 43:36</time>
                <div class="flex">
                    <el-avatar src="https://img1.baidu.com/it/u=681713666,1923984648&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"></el-avatar>
                    <div>
                        <el-link href="paper.html">添加考卷</el-link>
                        <el-link href="register.html">注册</el-link>
                        <el-link href="login.html">登录</el-link>
                    </div>
                </div>
            </div>
        </el-header>
        <el-main>
            <div class="c900 h100" style="overflow-y: auto; background-color: #fff">
                <div class="flex" style="padding-inline: 20px">
                    <h3>Java基础测试题</h3>
                    <el-button type="primary" @click="commit">提交</el-button>
                </div>

                <el-card>
                    <div slot="header">
                        填空题（每空2分）
                    </div>
                    <ol>
                        <li v-for="d in paper.details" v-if="d.question.type=='填空题'">
                            <question :ref="'d'+d.id" :data="d.question"></question>
                        </li>
                    </ol>
                </el-card>
                <el-card>
                    <div slot="header">
                        单选题（每题3分）
                    </div>
                    <ol>
                        <li v-for="d in paper.details" v-if="d.question.type=='单选题'">
                            <question :ref="'d'+d.id" :data="d.question"></question>
                        </li>
                    </ol>
                </el-card>
                <el-card>
                    <div slot="header">
                        多选题（每题5分）
                    </div>
                    <ol>
                        <li v-for="d in paper.details" v-if="d.question.type=='多选题'">
                            <question :ref="'d'+d.id" :data="d.question"></question>
                        </li>
                    </ol>
                </el-card>
                <el-card>
                    <div slot="header">
                        判断题（每题1分）
                    </div>
                    <ol>
                        <li v-for="d in paper.details" v-if="d.question.type=='判断题'">
                            <question :ref="'d'+d.id" :data="d.question"></question>
                        </li>
                    </ol>
                </el-card>
            </div>
        </el-main>
        <el-footer class="flex title" style="justify-content: center;height: 30px">
            <a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
        </el-footer>
    </el-container>
</div>
</body>
<script>
    Vue.component("question",{
        props:["data"],
        template:`
            <div style="position: relative">
                <span v-if="data.eDetail" style="position: absolute; right: 0px; top: 0px">
                    {{data.eDetail.tf ? "对" : "错"}}
                </span>
                <div v-if="data.type=='填空题'" v-html="rendTk(data.content)"></div>
                <div v-else-if="data.type=='单选题'" v-html="rendDx(data,'radio')"></div>
                <div v-else-if="data.type=='多选题'" v-html="rendDx(data,'checkbox')"></div>
                <div v-else-if="data.type=='判断题'" v-html="rendPd(data.content)"
                     class="flex"></div>
            </div>
        `,
        methods:{
            rendTk(content){
                content = content.replaceAll(/_+/g, `<input class="fill" name="${this.data.id}">`);
                return content;
            },
            rendDx(data, type){
                let items = data.items.split(/;/);
                let itemStr = "";
                items.forEach(item=>{
                    if (item.startsWith("$")) {
                        item = item.substring(1);
                    }
                    itemStr += `<li><input type="${type}" name="${data.id}" value="${item}">${item}</li>`;
                })
                let html = `${data.content}
                            <ol type="A">${itemStr}</ol>`
                return html;
            },
            rendPd(content){
                let html = `${content}<div style="margin-right: 40px">
                            <input type="radio" name="${this.data.id}" value="true">对
                            <input type="radio" name="${this.data.id}" value="false">错
                        </div>`;
                return html;
            },
        }
    })
    var v = new Vue({
        el:"#app",
        data:{
            paper:{},
            exam:null,
        },
        created(){
            axios.get("paper/get" + location.search).then(res=> {
                this.paper = res.data;
                if (location.search.indexOf("look")>-1){
                    // 查看模式
                    axios.get("exam/get" + location.search.replace("id","pid")).then(res=>{
                        this.exam = res.data;
                        this.paper.details.forEach(d=>{
                            //d.question.id   ==> exam.details.question.id
                            let eDetail = this.exam.details.find(ed=> ed.question.id == d.question.id);
                            d.question.eDetail = eDetail;
                        })
                        for (let name in this.$refs) {
                            let arr = this.$refs[name];
                            let question = arr[0];
                            question.$forceUpdate();
                        }
                    })
                }
            });


        },
        methods:{
            commit(){
                this.paper.details.forEach(detail=>{
                    let inputs = document.getElementsByName(detail.question.id);
                    let answer = "";
                    inputs.forEach(input=>{
                        if(input.type=='text'){
                            answer += input.value.length==0?" ":input.value;
                        } else if(input.checked){
                            answer += input.value;
                        } else {
                            answer += " ";
                        }
                        answer += ";"
                    });
                    answer = answer.substring(0, answer.length - 1);
                    // 解决判断题bug
                    if(detail.question.type=='判断题'){
                        answer = answer.replaceAll(/\W/g,"");
                    }
                    detail.answer = answer;
                    console.info(answer);
                });

                let exam = {pid: location.search.replaceAll(/\D+/g,""),
                            details: this.paper.details.map(
                                d=> {return { qid:d.qid, answer:d.answer};} )};
                axios.post("exam/commit", exam).then(res=>{
                    if(res.data.code == 1){
                        this.$alert("提交成功!您的得分是:" + res.data.data.score);
                    } else {
                        this.$alert(res.data.msg);
                    }
                });
            }
        }
    })
</script>
<style>
    html,body{
        margin: 0px;
        padding: 0px;
    }
    #app>.el-container>.el-main{
        overflow: hidden;
        background-image: url("https://img0.baidu.com/it/u=668574498,1720392676&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=295");
        background-size: cover;
    }
    .el-main{
        padding: 0px 10px;
    }
    .el-card{
        margin-top: 10px;
    }
    html,body,#app,#app>.el-container{
        height: 100%;
    }
    *{
        transition: all .5s;
    }
    a{
        text-decoration: none;
    }
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    img{
        width: 40px;
        height: 40px;
        object-fit: cover;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2,.grid3,.grid4{
        gap: 10px;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .h100{
        height: 100%;
    }
    small{
        font-size: .7em;
        color: #989
    }
    li>ol{
        margin-bottom: 20px;
    }
    li{
        margin-block: 10px;
        line-height: 2rem;
    }
    .fill{
        border: 0px;
        border-bottom: 1px #000 solid;
        margin-inline: 3px;
        padding: 5px;
        text-align: center;
        color: #0a6999;
    }
</style>

</html>